<template>
  <view>
    <chart-title title="车辆收入" @click="rotate" />

    <view class="padding-lr-12 flex-row flex-center padding-top-30">
      <view class="chart-box" :class="{relative:!showData}">
        <qiun-data-charts
          v-show="showData"
          class="chart-box"
          type="bar"
          :opts="options"
          :localdata="localdata"
          :canvas2d="true"
          :loading-type="5"
          canvas-id="tBaBaVehicleCharts"
        />
        <l-no-data v-show="!showData" text="暂无数据" type="data" :img-width="220" :img-height="184" />
      </view>
    </view>
  </view>
</template>

<script>
import ChartTitle from '../chart-title/chart-title'
import { fetchVehicleOrderSummary } from '@/common/api/statistics.js'
import options from './index'
export default {
  name: 'VehicleModel',
  components: {
    ChartTitle
  },
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    max: {
      type: Number,
      default: 10
    }
  },
  data() {
    return {
      localdata: [],
      options,
      data: [],
      showData: true
    }
  },
  created() {
    this.getData()
  },
  methods: {
    rotate() {
      this.jump('/charts/vehicle/vehicle?type=1&title=车辆收入&data=' + JSON.stringify(this.data))
    },
    async getData() {
      const [err, res] = await fetchVehicleOrderSummary({
        startTime: this.startTime + ' 00:00:00',
        endTime: this.endTime + ' 23:59:59',
        start: 0,
        limit: 9999
      })
      if (!this.$http.errorCheck(err, res)) return false
      const data = res.data.data

      const newData = data.map(item => {
        return {
          value: item.orderAmount,
          text: item.number,
          group: '车辆收入'
        }
      })

      if (newData.length > this.max) this.localdata = newData.slice(0, this.max)
      else this.localdata = this.copyData(newData)

      this.data = newData
      this.showData = !!data.length
    }
  }
}
</script>

<style scoped lang="scss">
@import "../index";
</style>
